/*
 * @Author: Yxliam
 * @Date: 2023-12-12 16:59:16
 * @LastEditors: Yxliam
 * @LastEditTime: 2024-01-19 11:38:36
 * @Description:
 */
import React, { useState } from "react";
// import {HomeOutline} from '@fruits-chain/icons-react-native';
import { TransitionPresets } from "@react-navigation/stack";
import {
  Text,
  View,
  StyleSheet,
  TouchableOpacity,
  Image,
  Modal,
  Animated,
  TouchableHighlight,
  Dimensions,
  Alert,
  TouchableWithoutFeedback,
} from "react-native";
import Home from "../home";
import My from "../my";
import Together from "../together";
import Log from "../log";
import { CurvedBottomBarExpo } from "react-native-curved-bottom-bar";
import Ionicons from "@expo/vector-icons/Ionicons";
import themeStore from "stores/theme";
import { observer } from "mobx-react-lite";

const screenWidth = Dimensions.get("window").width;
const Tabs = () => {
  const [modalVisible, setModalVisible] = useState(false);
  const [type, setType] = useState<"DOWN" | "UP">("DOWN");
  const theme = themeStore.theme;

  const toggleModal = () => {
    setModalVisible(!modalVisible);
  };

  const onPublishPress = () => {
    if (type === "UP") {
      setType("DOWN");
    } else {
      setType("UP");
    }
    // toggleModal()
    // globalLoading.show()
    // setTimeout(() => {
    //   globalLoading.hide()
    // }, 2000)
  };

  const _renderIcon = (routeName: string, selectedTab: string) => {
    let icon: any = "";

    switch (routeName) {
      case "home":
        icon = "ios-home-outline";
        break;
      case "gongtong":
        icon = "people-sharp";
        break;
      case "rizhi":
        icon = "calendar";
        break;
      case "me":
        icon = "person-outline";
        break;
    }

    return (
      <Ionicons
        name={icon}
        size={25}
        color={routeName === selectedTab ? theme.navselectcolor : "gray"}
      />
    );
  };

  const renderTabBar = (props: any) => {
    let { routeName, selectedTab, navigate } = props;
    return (
      <TouchableOpacity
        onPress={() => navigate(routeName)}
        style={styles.tabbarItem}
      >
        {_renderIcon(routeName, selectedTab)}
      </TouchableOpacity>
    );
  };

  return (
    <View style={styles.root}>
      <CurvedBottomBarExpo.Navigator
        type={type}
        style={styles.bottomBar}
        shadowStyle={styles.shawdow}
        height={55}
        circleWidth={50}
        screenOptions={{ headerShown: false }}
        bgColor={theme.navbarbg}
        initialRouteName="home"
        borderTopLeftRight
        renderCircle={({ selectedTab, navigate }) => (
          <Animated.View
            style={[
              type === "UP" ? styles.btnCircle : styles.btnCircleUp,
              { backgroundColor: theme.navbarbg },
            ]}
          >
            <TouchableOpacity
              style={styles.button}
              onPress={() => {
                // if (type === 'UP') {
                //   setType('DOWN');
                // } else {
                //   setType('UP');
                // }
                // navigate('Public')
              }}
            >
              <Ionicons
                name={"fitness"}
                color={theme.navselectcolor}
                size={25}
              />
            </TouchableOpacity>
          </Animated.View>
        )}
        tabBar={renderTabBar}
      >
        <CurvedBottomBarExpo.Screen
          name="home"
          options={{
            headerShown: false,
          }}
          position="LEFT"
          component={() => <Home />}
        />
        <CurvedBottomBarExpo.Screen
          name="gongtong"
          options={{
            headerShown: false,
          }}
          position="LEFT"
          component={() => <Together />}
        />
        <CurvedBottomBarExpo.Screen
          name="rizhi"
          options={{
            headerShown: false,
          }}
          position="RIGHT"
          component={() => <Log />}
        />
        <CurvedBottomBarExpo.Screen
          name="me"
          options={{
            headerShown: false,
          }}
          component={(props: { navigation: any }) => (
            <My navigation={props.navigation} />
          )}
          position="RIGHT"
        />
      </CurvedBottomBarExpo.Navigator>
    </View>
  );
};

const styles = StyleSheet.create({
  root: {
    width: "100%",
    height: "100%",
  },
  container: {
    flex: 1,
    padding: 20,
  },
  shawdow: {
    shadowColor: "#DDDDDD",
    shadowOffset: {
      width: 0,
      height: 0,
    },
    shadowOpacity: 1,
    shadowRadius: 5,
  },
  button: {
    flex: 1,
    justifyContent: "center",
  },
  bottomBar: {},
  btnCircle: {
    width: 60,
    height: 60,
    borderRadius: 30,
    alignItems: "center",
    justifyContent: "center",
    backgroundColor: "white",
    shadowColor: "#000",
    shadowOffset: {
      width: 0,
      height: 1,
    },
    shadowOpacity: 0.2,
    shadowRadius: 1.41,
    elevation: 1,
    bottom: 28,
  },
  btnCircleUp: {
    width: 60,
    height: 60,
    borderRadius: 30,
    alignItems: "center",
    justifyContent: "center",
    // backgroundColor: 'white',
    // backgroundColor: '#E8E8E8',
    bottom: 30,
    shadowColor: "#000",
    shadowOffset: {
      width: 0,
      height: 1,
    },
    shadowOpacity: 0.2,
    shadowRadius: 1.41,
    elevation: 1,
  },
  imgCircle: {
    width: 30,
    height: 30,
    tintColor: "gray",
  },
  tabbarItem: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
  },
  img: {
    width: 30,
    height: 30,
  },
  publish: {
    width: 50,
    height: 50,
  },
});

export default observer(Tabs);
